<template>
	<view style="padding: 10px 20px;display: flex;flex-direction: column;">
		<uni-card>
			<scroll-view class="gl-media-view" scroll-y="true" :style="{maxHeight:swiperH+'px'}" style="width: 100%;">
				<uni-table type="selection" emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center" width="30">ID</uni-th>
						<uni-th width="120">名称</uni-th>
						<uni-th>结算价</uni-th>
						<uni-th>指导价</uni-th>
						<uni-th>会员价</uni-th>
						<uni-th>库存</uni-th>
						<uni-th>状态</uni-th>
						<uni-th>上架</uni-th>
						<uni-th>创建时间</uni-th>
						<uni-th>
							<view style="display: flex;gap: 10px;">
								<view v-if="!Boolean(curSpu.spu)" class="gl-link gl-link-success">
									<text @tap="popupEvent('new')">新增</text>
								</view>
								<view class="gl-link gl-link-warning">
									<text @tap="refresh">刷新</text>
								</view>
							</view>
						</uni-th>
					</uni-tr>

					<uni-tr v-for="(item, index) in skuData" :key="index">
						<uni-td align="center" width="30">{{item.id}}</uni-td>
						<uni-td>{{item.name}}</uni-td>
						<uni-td>{{((item.setprice || 0) / 100).toFixed(2)}}</uni-td>
						<uni-td>{{((item.money || 0) / 100).toFixed(2)}}</uni-td>
						<uni-td>{{((item.price || 0) / 100).toFixed(2)}}</uni-td>
						<uni-td>{{item.fund}}</uni-td>
						<uni-td>
							<switch :checked="Boolean(item.status)" :disabled="Boolean(item.sku)"
								style="transform:scale(0.7)" @change="event => EventStateChange(event, item.id)" />
						</uni-td>
						<uni-td>
							<switch :checked="Boolean(item.is_line)" style="transform:scale(0.7)"
								@change="event => EventListChange(event, item.id)" />
						</uni-td>
						<uni-td>{{item.created}}</uni-td>
						<uni-td>
							<view style="display: flex;gap: 10px;">
								<view class="gl-link gl-link-base">
									<text @tap="editSkuEvent(item)">编辑</text>
								</view>
								<view v-if="!Boolean(item.sku)" class="gl-link gl-link-error">
									<text @tap="delSkuEvent(item)">移除</text>
								</view>
							</view>
						</uni-td>
					</uni-tr></uni-table>
			</scroll-view>

			<view class="gl-footer">
				<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
					@change="refresh" />
			</view>
		</uni-card>


		<!-- popup模态窗口 -->
		<popSkuCardVue ref="popSkuCard" :pid="curSpu.pid" :gid="curSpu.id" @refresh="refresh"></popSkuCardVue>

	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import popSkuCardVue from '@/components/sub-product/pop-sku-card.vue';
	export default {
		data() {
			return {
				swiperH: 0,
				count: 0, // 记录数
				size: 50, // 页大小
				page: 1, // 当前页
				sConf: getApp().globalData,
				skuData: [],
				curSpu: null,
				curSku: {
					id: null,
					icon: '/media/default/cover.png',
					name: null,
					idcode: null,
					sdcode: null,
					setprice: 0,
					money: 0,
					price: 0,
					fund: 0,
					discount: 0,
					sku: null,
					pid: null,
					gid: null,
				},
				levelData: [{
					text: '游客',
					value: 1
				}, {
					text: '体验官',
					value: 2
				}, {
					text: '推荐官',
					value: 3
				}, {
					text: '运营官',
					value: 4
				}, {
					text: '铂金董事',
					value: 5
				}, {
					text: '钻石董事',
					value: 6
				}, {
					text: '功勋董事',
					value: 7
				}, {
					text: '悦玺董事',
					value: 8
				}]
			}
		},
		mounted() {
			let window = uni.getWindowInfo();
			this.designLayout(window.windowHeight);
			// 加载初始数据			
			this.curSpu = this.data
			this.curSku.pid = this.pid
			this.curSku.gid = this.gid
			this.refresh()
		},
		props: {
			data: {
				type: Object,
				default: Array
			},
			pid: {
				type: Number,
				default: 0
			},
			gid: {
				type: Number,
				default: 0
			},
		},
		components: {
			popSkuCardVue
		},
		methods: {
			designLayout(wh) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.gl-media-view').boundingClientRect();
					query.exec((res) => {
						this.swiperH = wh - Math.ceil(res[0].top) - 80;
					});
				})
			},
			/**
			 * 传图组件
			 */
			changeCover() {
				this.$refs.cosCover.open()
			},
			/**
			 * 传图结果
			 */
			EventFinish(e) {
				console.log('EventFinish', e);
				this.curSku.icon = e[0]
			},
			refresh() {
				let host = this.sConf.host + '/admin/cargoSku/';
				let token = this.sConf.auth.token || '';
				let data = {
					page: this.page,
					gid: this.gid,
					ordering: '-created'
				}
				psMethod.authenticatorGetSync(host, token, data).then(res => {
					console.log('加载商品SKU列表', res);
					if (res.rescode === 200) {
						this.skuData = res.resmsg
						this.count = res.count;
						this.size = res.size;
					}
				})
			},
			checkBoxChange(e) {
				this.curSku.discount = e.detail.value.includes('discount') ? 1 : 0
			},
			/**
			 * 创建SKU
			 */
			popupEvent(e = 'close') {
				console.log('actionsClick', e);
				if (e === 'reload') {
					this.refresh()
				} else if (e === 'save') {
					if (Boolean(this.curSku.id)) {
						this.loadDataSkuPatch()
					} else {
						this.loadDataSkuPost()
					}
				} else if (e === 'new') {
					this.$refs.popSkuCard.open()
				} else {
					this.$refs.popSkuCard.close()
				}
			},
			/**
			 * 编辑SKU
			 */
			editSkuEvent(e) {
				console.log('editSkuEvent', e.id);
				// this.curSku = e
				// this.popupEvent('new')
				this.$refs.popSkuCard.open(e.id)
			},
			/**
			 * 移除SKU
			 */
			delSkuEvent(e) {
				uni.showToast({
					title: '该功能停用',
					icon: 'error'
				})
				return
				let that = this
				uni.showModal({
					title: '删除SKU',
					content: '是否确认要删除改产品?',
					success(r) {
						if (r.confirm) {
							let host = that.sConf.host + '/admin/cargoSku/' + e.id + '/';
							let token = that.sConf.auth.token || '';
							psMethod.authenticatorDeleteSync(host, token).then(res => {
								if (res.rescode === 200) {
									uni.showToast({
										title: '提交成功',
										success() {
											that.refresh()
											that.popupEvent()
										}
									})
								}
							})
						}
					}
				})
			},
			/**
			 * 提交保存
			 */
			loadDataSkuPost() {
				let host = this.sConf.host + '/admin/cargoSku/';
				let token = this.sConf.auth.token || '';
				let data = this.curSku
				psMethod.authenticatorPostSync(host, token, data).then(res => {
					if (res.rescode === 200) {
						let that = this
						uni.showToast({
							title: '提交成功',
							success() {
								that.refresh()
								that.popupEvent()
							}
						})
					}
				})
			},
			loadDataSkuPatch() {
				let host = this.sConf.host + '/admin/cargoSku/' + this.curSku.id + '/';
				let token = this.sConf.auth.token || '';
				let data = this.curSku
				psMethod.authenticatorPatchSync(host, token, data).then(res => {
					if (res.rescode === 200) {
						let that = this
						uni.showToast({
							title: '提交成功',
							success() {
								that.refresh()
								that.popupEvent()
							}
						})
					}
				})
			},
			EventStateChange(e, index) {
				console.log('EventStateChange', e.detail.value, index);
				let that = this
				let host = this.sConf.host + '/admin/cargoSku/' + index + '/';
				let token = this.sConf.auth.token || '';
				let data = {
					status: e.detail.value ? 1 : 0
				}
				psMethod.authenticatorPatchSync(host, token, data).catch(err => {
					uni.showToast({
						title: '请求失败',
						success() {
							that.refresh()
						}
					})
				})
			},
			EventListChange(e, index) {
				console.log('EventListChange', e.detail.value, index);
				let that = this
				let host = this.sConf.host + '/admin/cargoSku/' + index + '/';
				let token = this.sConf.auth.token || '';
				let data = {
					is_line: e.detail.value ? 1 : 0
				}
				psMethod.authenticatorPatchSync(host, token, data).catch(err => {
					console.log('SKU商品上架', err);
					uni.showToast({
						title: err.resmsg.detail || '请求失败',
						success() {
							that.refresh()
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped></style>